<template>
  <lay-container fluid="true" style="padding: 10px;">
    <lay-row space="10">
      <lay-col md="8">
        <lay-card class="leftTree">
<!--          <SourcesTree :scrollHeight="'700px'" :showCheckbox="showFlag" @viewTable="viewTableInfo"></SourcesTree>-->
          <VirtualTree :showCheckbox="false"></VirtualTree>
        </lay-card>
      </lay-col>
      <lay-col md="16">
        <lay-card style="min-height:790px">
          <lay-tab type="brief" v-model="method">
            <lay-tab-item title="表结构" id="1">
              <TableBasicInfo
                  :mode="'field'"
                  :tableHeight="tableHeight"
              ></TableBasicInfo>
            </lay-tab-item>
            <lay-tab-item title="数据预览" id="2">
              <TableDataView></TableDataView>
            </lay-tab-item>
          </lay-tab>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script lang="ts">
import {ref} from "vue";
import AddDataSource from '../../../components/database/AddDataSource.vue';
import SourcesTree from '../../../components/database/SourcesTree.vue';
import TableBasicInfo from "../../../components/database/TableBasicInfo.vue";
import TableDataView from "../../../components/database/TableDataView.vue";
import VirtualTree from "../../../components/database/VirtualTree.vue";

export default {
  name: 'dataSource',
  components: {
    TableBasicInfo,
    AddDataSource,
    SourcesTree,
    TableDataView,
    VirtualTree
  }
};
</script>

<script lang="ts" setup>
import {ref} from "vue";

const method = ref("1");
const showFlag = ref(false);
const tableHeight = ref('500px');

const viewTableInfo = (node: any) => {
  console.log('viewTableInfo:')
  console.log(node)
}

</script>

<style>
.leftTree {
  overflow: auto;
  width: 100%;
}
</style>
